<template>
  <div>
    <button type="button" class="btn btn-white btn-default btn-round" @click="selectFile()">
      <i class="ace-icon fa fa-upload"></i>
      {{text}}
    </button>

    <input class="hidden" :id="inputId + '-input'" ref="file" type="file" @change="uploadFile()">
  </div>
</template>

<script>
  export default {
    name: 'file',
    // 暴露出去的可配置的属性
    props: {
      text: {
        default: '上传文件'
      },
      inputId: {
        default: 'file-upload'
      },
      suffixs: {
        default: []
      },
      use: {
        default: ''
      },
      afterUpload: {
        type: Function,
        default: null
      }
    },
    data: function () {
      return {
      }
    },
    methods: {
      /**
       * 上传文件
       */
      uploadFile() {
        let _this = this
        //  下面这句等价于document.querySelector('#file-upload-input').files[0]
        let file = _this.$refs.file.files[0]

        // 判断文件格式
        let suffixs = _this.suffixs // 能上传的文件格式
        let fileName = file.name
        let suffix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase()
        let validateSuffix = false
        for (let i = 0; i < suffixs.length; i++) {
          if (suffixs[i].toLowerCase() === suffix) {
            validateSuffix = true
            break
          }
        }
        if (!validateSuffix) {
          Toast.warning('文件格式不正确! 只支持上传: ' + suffixs.join(', '))
          // 清空该input里的数据
          // 因为input标签绑定的是应该一个@change事件, 如果第一次上传.mp4文件, 会被成功拦截
          // 如果第二此继续上传该文件则不会拦截, 因为两次上传, input里的数据没有发生改变, 还是该文件
          $('#' + _this.inputId + '-input').val('')
          return
        }

        // FormData 对象的使用：
        //   1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
        //   2.异步上传二进制文件。
        let formData = new window.FormData()
        //  key: 'file', 必须和后端controller参数名一致
        formData.append('file', file)
        formData.append('use', _this.use)

        Loading.show()

        _this.$axios.post(process.env.VUE_APP_SERVER + '/file/admin/oss-simple', formData).then((resp) => {
          if (resp.data.success) {
            Loading.hide()

            console.log('上传文件成功!', resp.data)
            _this.afterUpload(resp)
            $('#' + _this.inputId + '-input').val('')
          }
        })
      },

      /**
       * 点击上传文件按钮(触发上传功能)
       */
      selectFile() {
        let _this = this
        $('#' + _this.inputId + '-input').trigger('click')
      }
    }
  }
</script>

<style scoped>
</style>
